<template>
	<div class="edit-box">
		<activities-bg></activities-bg>
    	<m-newZone v-if="componentType === type.NewZone" :relGroup="componentRelGroup"></m-newZone>
    	<m-posters v-if="componentType === type.posters" :relGroup="componentRelGroup"></m-posters>
    	<m-threePic v-if="componentType === type.threePic" :relGroup="componentRelGroup"></m-threePic>
    	<m-slidePic v-if="componentType === type.slidePic" :relGroup="componentRelGroup"></m-slidePic>
    	<m-NewBot v-if="componentType === type.NewBot" :relGroup="componentRelGroup"></m-NewBot>
    	<m-TwoPro v-if="componentType === type.TwoPro" :relGroup="componentRelGroup"></m-TwoPro>
    	<m-NinePro v-if="componentType === type.NinePro" :relGroup="componentRelGroup"></m-NinePro>
    	<m-OnePro v-if="componentType === type.OnePro" :relGroup="componentRelGroup"></m-OnePro>
    	<tab-head v-if="componentType === type.TabHead" :relGroup="componentRelGroup"></tab-head>
    	<m-Coupons v-if="componentType === type.Coupons" :relGroup="componentRelGroup"></m-Coupons>
    	<m-Coupons2 v-if="componentType === type.Coupons2" :relGroup="componentRelGroup"></m-Coupons2>
    	<m-banner v-if="componentType === type.banner" :relGroup="componentRelGroup"></m-banner>
	</div>

</template>

<script>
import NewZone from '../EditHome/NewZone';
import TabHead from "./TabHeader1";
import activitiesBg from './activitiesBg';
import Posters from './posters';
import threePic from './threePic';
import slidePic from './slidePic';
import NewBot from './NewBot';
import TwoPro from './TwoPro';
import NinePro from './NinePro';
import OnePro from './OnePro';
import Coupons from './Coupons';
import Coupons2 from './Coupons2';
import Banner from '../EditHome/Banner';
import {mapGetters} from "vuex";
export default {
  	name: 'hello',
  	data () {
    	return {
			msg: '这是测试首页',
			type: {
				NewZone:"NewZone",
				posters: "activitiesbanner",
				threePic:"activitiesThreePic",
				slidePic:"activitiesSlidePic",
				NewBot:"activitiesNewBot",
				TwoPro:"activitiesTwoPro",
				NinePro:"activitiesNinePro",
				OnePro:"activitiesOnePro",
				TabHead:"TabHead",
				Coupons:'ActivitieCoupons',
				Coupons2:'ActivitieCoupons2',
				banner: "HomeCarousel",
			}
		}
	},
	components: {

	},
	computed: {
		...mapGetters([
			"editConfig"
		]),
		componentType() {
			return this.editConfig.type;
		},
		//这个值对应的是relGroup;
		componentRelGroup() {
			return this.editConfig.id;
		},
	},
	created () {
		// console.log(this.$store);
	},
	mounted () {
		
	},
	components: {
		"m-newZone":NewZone,
		"m-posters":Posters,
		"m-threePic":threePic,
		"m-slidePic":slidePic,
		"m-NewBot":NewBot,
		"m-TwoPro":TwoPro,
		"m-NinePro":NinePro,
		"m-OnePro":OnePro,
		"m-Coupons":Coupons,
		"m-Coupons2":Coupons2,
		activitiesBg,
		TabHead,
		"m-banner": Banner,
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.edit-box {
         /* display: flex;  */
         /* border: 1px solid blue; */
          height: 500px;
          width: 100%;
		  overflow: scroll;
         /* margin-top: 20px; */
	}
</style>
